/*
  ElemList 组件样式 (中文注释)
  - 用途：元素列表的布局与交互样式，局部化到 `.elem-list-component` 根类
  - 约定：所有样式以 `.elem-list-component` 前缀开头，以避免与页面其他样式冲突
*/
.elem-list-component .elem-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.elem-list-component .elem-item {
  /* 单条元素项：左右布局，左侧为缩略，右侧为操作按钮 */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
}

.elem-list-component .elem-thumb {
  /* 缩略区域样式：固定尺寸、圆角和背景 */
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.elem-list-component .elem-item.selected {
  /* 选中态高亮背景 */
  background: rgba(255, 140, 66, 0.06);
}

.elem-list-component .elem-actions {
  /* 操作按钮组：右对齐并换行 */
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
}

.elem-list-component .elem-actions-item-btn {
  /* 操作按钮样式：触控友好尺寸与圆角 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  min-width: 44px;
  min-height: 44px;
  border-radius: 8px;
  background: transparent;
  color: #FF8C42;
  font-size: 22px;
  border: none;
}

.elem-list-component .elem-actions-item-btn.disabled {
  /* 禁用态样式：降低可见性并禁止点击 */
  opacity: 0.34;
  pointer-events: none;
  color: #999;
}

.elem-list-component .elem-actions-item-btn.delete {
  /* 删除按钮使用危险色提示 */
  color: #e6553c;
}


